<template>
	<view>
		<view class="content">
			<view class="top_bar">
				<view @click="backLogin" class="top_bar_left">
					<image src="../../static/fh.png" mode=""></image>
				</view>
				<view @click="toLogin" class="top_bar_right">
					<view class="text">
						登录
					</view>
				</view>
			</view>
			<view class="logo">
				<image src='../../static/applogo.png' mode="heightFix"></image>
			</view>
			<view class="main">
				<text>注册</text>
				
			</view>
			<view class="form_main">
				<input @blur="checkText" v-model="text" type="text" value="" placeholder="请输入用户名" />
				<view v-if="textkey">
					<view class="show_help">
						{{ texterror }}
					</view>
				</view>
				<view v-else>
					<image class="text_img"  src="../../static/success.png" mode=""></image>
				</view>
				<input @blur="checkEmail" v-model="email" type="text" value="" placeholder="请输入邮箱" />
				<view v-if="emailkey">
					<view class="show_help show_help_two" v-show="emailkey">
						{{ emailerror }}
					</view>
				</view>
				<view v-else>
					<image class="text_img text_img_two" src="../../static/success.png" mode=""></image>
				</view>
				
				<input @blur="checktel" v-model="tel" type="text" value="" placeholder="请输入手机号码" />
				<view v-if="telkey">
					<view class="show_help show_help_three" v-show="telkey">
						{{ telerror }}
					</view>
				</view>
				<view v-else>
					<image class="text_img text_img_three" src="../../static/success.png" mode=""></image>
				</view>
				<input @blur="checkPwd" v-model="pwd" :type="pwdtype" class="pwd" value="" placeholder="请输入密码"/>
				<view v-if='passwordkey'>
					<view class="show_help show_help_fired" v-show="passwordkey">
						{{ passworderror }}
					</view>
				</view>
				<view v-else>
					<image @click="look_pwd" class="text_img text_img_fired" :src="pwdimgsrc" mode=""></image>
				</view>
				<input @blur="checkPwd2" v-model="pwd2" :type="pwdtype" class="pwd" value="" placeholder="请输入密码"/>
				<view v-if='passwordkey2'>
					<view class="show_help show_help_five" v-show="passwordkey2">
						{{ passworderror2 }}
					</view>
				</view>
				<view v-else>
					<image class="text_img text_img_five" src="../../static/success.png" mode=""></image>
				</view>
			</view>
			<view class="but">
				<!-- <view class="sub"></view> -->
				<view @click="subminForm" :class='submit?"buts":"buts not_submit"'>
					注册
				</view>
				<!-- <view class="sub sub_reight"></view> -->
			</view>
		</view>

	</view>
</template>

<script>
	import request from '../../utails/request.js'
	
	export default {
		data() {
			return {
				// 判断是否错误
				textkey:true,
				emailkey:true,
				telkey:true,
				passwordkey:true,
				passwordkey2:true,
				loopwd:false,
				pwdtype:'password',
				pwdimgsrc:'../../static/no_viev.png',
				
				// 文本内容
				text:'',
				pwd:'',
				pwd2:'',
				email:'',
				tel:'',
				
				texterror : '',
				emailerror: '',
				telerror:'',
				passworderror:'',
				passworderror2:'',
				
				// 表单提交
				submit: false
				
			}
		},
		methods: {
			// 密码可见 不可见
			look_pwd(){
				this.loopwd = !this.loopwd
				this.loopwd?this.pwdimgsrc='../../static/viev.png':this.pwdimgsrc='../../static/no_viev.png'
				this.loopwd?this.pwdtype='text':this.pwdtype='password'
			},
			// 校验名称
			checkText(){
				let texts = /^[a-zA-Z0-9_\u4e00-\u9fa5]{3,20}$/
				if(texts.test(this.text)){
					this.textkey = false
					this.checkForm()
				}else{
					this.texterror = '名称格式错误'
					this.textkey = true
					this.checkForm()
				}
			},
			
			// 校验邮箱
			checkEmail(){
				let texts = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
				if(texts.test(this.email)){
					this.emailkey = false
					this.checkForm()
					console.log('ok')
				}else{
					this.emailerror = '邮箱格式错误'
					this.emailkey = true
					this.checkForm()
				}
			},
			
			// 校验手机号
			checktel(){
				let texts = /^1[3-9]\d{9}$/
				if(texts.test(this.tel)){
					this.telkey = false
					this.checkForm()
				}else{
					this.telerror = '号码格式错误'
					this.telkey = true
					this.checkForm()
				}
			},
			
			// 校验密码
			checkPwd(){
				let texts = /^[a-zA-Z0-9]{8,16}$/
				if(texts.test(this.pwd)){
					this.passwordkey = false
					this.checkForm()
				}else{
					this.passworderror = '密码格式错误'
					this.passwordkey = true
					this.checkForm()
				}
			},
	
			// 校验确认密码
			checkPwd2(){
				if(this.pwd==this.pwd2){
					this.passwordkey2 = false
					this.checkForm()
				}else{
					this.passworderror2 = '密码不一致'
					this.passwordkey2 = true
					this.checkForm()
				}
			},
			
			// 校验表单
			checkForm(){
				if(this.textkey==false&&this.emailkey==false&&this.telkey==false&&this.passwordkey==false&&this.passwordkey2==false){
					this.submit = true
				}else{
					this.submit = false
				}
			},
			// 表单提交
			async subminForm(){
				if(this.submit==true){
					let data = {
						username:this.text,
						email:this.email,
						tel:this.tel,
						password:this.pwd
					}
					let res = await request.request({url:'/register/', data, method:'POST'})
					// 保持用户数据
					if(res.id){
						// 保持数据
						uni.setStorageSync('userinfo',res)
						uni.setStorageSync('keys',res.keys)
						uni.switchTab({
							url:'../index/index',
						})
					}else{
						uni.showToast({
							title:'账号或密码错误',
							icon:'none',
							duration:2000
						})
					}
					
				}
			},
			// 去登录
			toLogin(){
				uni.navigateTo({
					url:'../login/login'
				})
			},
			
			// 返回上一页
			backLogin(){
				uni.navigateBack({
					delta:1
				})
			}
			
		}
	}
</script>

<style>
	@import '../../commons/css/myss.scss';
	
	/* logo */
	.logo{
		width: 300rpx;
		height: 180rpx;
		margin: 60rpx auto;
		margin-top: 198rpx;
		text-align: center;
	}
	.logo image{
		height: 180rpx;
		
	}
	
	.main{
		padding: 5rpx 60rpx;
		font-size: 60rpx;
		font-weight: 700;
	}
	.form_main{
		padding: 20rpx 60rpx;
		position: relative;
	}
	.form_main input,.form_main .pwd{
		border: 0;
		height: 100rpx;
		width: 100%;
		margin: 15rpx 0;
		border-radius: 6%;
		border-bottom: #808080 1rpx solid;
		font-size: 40rpx;
		font-weight: 500;
	}
	.show_help{
		color: #dd524d;
		line-height: 88rpx;
		position: absolute;
		text-align: right;
		z-index: 99;
		width: 188rpx;
		height: 88rpx;
		right: 80rpx;
		top: 40rpx;
	}
	.show_help_two{
		top: 155rpx;
	}
	.show_help_three{
		top: 270rpx;
	}
	.show_help_fired{
		top:395rpx
	}
	.show_help_five{
		top:530rpx;
	}
	
	.text_img{
		position: absolute;
		z-index: 99;
		width: 88rpx;
		height: 88rpx;
		right: 60rpx;
		top: 40rpx;
	}
	.text_img_two{
		top: 155rpx;
	}
	.text_img_three{
		top: 270rpx;
	}
	.text_img_fired{
		top: 395rpx;
	}
	.text_img_five{
		top: 530rpx;
	}
	
	/* but */
	.but{
		margin: 80rpx 0;
		padding: 0 60rpx;
	}
	.but .buts{
		/* float: left; */
		margin: 0 auto;
		width: 80%;
		height: 105rpx;
		background-color: #f4ea2a ;
		font-size: 60rpx;
		line-height: 105rpx;
		text-align: center;
		color: white;
		/* 以数值 */
		border-radius: 48rpx;
		/* 显示阴影 */
		box-shadow: 0 50rpx 32rpx -36rpx #f4ea2a;
	}
	
	/*  */
	.but .not_submit{
		background-color: #babab5;
		box-shadow: 0 50rpx 32rpx -36rpx #8c8c88;
	}

</style>
